<template>
	<view class="member">
		<!-- #ifndef H5 -->
		<topTitle :styles="{back:true,title:'会员信息',color:'#fff'}" />
		<!-- #endif -->
		<view class="detail">
			<view class="portrait" @click="uploadImage">
				<view class="title">头像</view>
				<view class="image_box">
					<image :src="userInfo.avatar" mode=""></image>
				</view>
			</view>
			<view class="nickname">
				<view class="title">昵称</view>
				<view class="content" @click="goEdit('nickNmae',userInfo.nickname)">
					<input v-model="userInfo.nickname" disabled placeholder="请输入昵称" type="text">
					<uni-icons type="right" size="12"></uni-icons>
				</view>
			</view>
			<view class="name">
				<view class="title">姓名</view>
				<view class="content" @click="goEdit('name',userInfo.name)">
					<input v-model="userInfo.name" disabled placeholder="选填" type="text">
					<uni-icons type="right" size="12"></uni-icons>
				</view>
			</view>
			<view class="gender">
				<view class="title">性别</view>
				<view class="content">
					<picker @change="genderChange" :value="genderIndex" :range="genderList">
						<view class="uni-input">{{genderList[genderIndex]}}</view>
					</picker>
					<uni-icons type="right" size="12"></uni-icons>
				</view>
			</view>
			<view class="birth">
				<view class="title">出生日期</view>
				<view class="content">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
					<uni-icons type="right" size="12"></uni-icons>
				</view>
			</view>
		</view>
		<view class="address">
			<view class="my_address" @click="goMyAddress">
				<view class="title">我的地址</view>
				<view class="content">
					<text></text>
					<uni-icons type="right" size="12"></uni-icons>
				</view>
			</view>
			<view class="binding_tel" @click="bingdingTel">
				<view class="title">绑定手机号</view>
				<view class="content">
					<text>{{ userInfo.bind_phone == 1?userInfo.phone:'未绑定'}}</text>
					<uni-icons type="right" size="12"></uni-icons>
				</view>
			</view>
		</view>
		<view class="out_login" @click="outLogin">
			退出登录
		</view>
	</view>
</template>

<script>
	import topTitle from "@/components/topTitle.vue"
	export default {
		components:{
			topTitle
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				userInfo:{},
				date: currentDate,
				time: '12:01',
				memberDetail: {
					level: '普通会员',
					nickname: '张三',
					name: '',
					gender: '',
					birth: '',
				},
				genderIndex: 0,
				visible: false,
				indicatorStyle: `height:50px;`,
				memberLevel: ['普通会员', '白银会员', '黄金会员', '铂金会员'],
				genderList: ['请选择','男', '女'],
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			//性别选择
			genderChange(e) {
				const val = e.detail.value
				this.genderIndex = val
				this.memberDetail.gender = this.genderList[val]
				console.log(val,'-----------------val')
				if(val == 0){
					uni.showToast({
						title:'当前选择有误,请重新选择',
						icon:"none"
					})
					return false;
				}
				this.$http({
					url:'/api/user/edit',
					method:'post',
					data:{
						sex:val
					},
					success:result=>{
						console.log(result,'--------------123')
						if(result.code == 200){
							uni.showToast({
								title:result.msg
							})
							this.getUserInfo()
						}
					}
				})
			},
			//获取用户信息
			getUserInfo(){
				this.$http({
					url:'/api/user/info',
					method:'get',
					success:result=>{
					console.log(result,'------------------result')
						if(result.code == 200){
							this.userInfo = result.data.info
							uni.setStorageSync('userInfo',JSON.stringify(this.userInfo))
							this.genderIndex = this.userInfo.sex
							if(this.userInfo.birthday != ""){
								this.date = this.userInfo.birthday
							}
						}
					}
				})
			},
			//修改出生年月
			bindDateChange: function(e) {
				this.date = e.detail.value
				this.memberDetail.birth = e.detail.value
				this.$http({
					url:'/api/user/edit',
					method:'post',
					data:{
						birthday:this.date
					},
					success:result=>{
						console.log(result,'--------------123')
						if(result.code == 200){
							uni.showToast({
								title:reuslt.msg
							})
							this.getUserInfo()
						}
					}
				})
			},
			//选择时间
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//清除输入框
			clearInp(str){
				for(var key in this.memberDetail){
					if(key == str){
						this.memberDetail[key] = ''
					}
				}
			},
			//绑定手机号
			bingdingTel(){
				uni.navigateTo({
					url:'/pages/my/member/bindingTel'
				})
			},
			//修改昵称/姓名
			goEdit(type,text){
				uni.navigateTo({
					url:`/pages/my/member/edit?type=${type}&text=${text}`
				})
			},
			//我的地址
			goMyAddress(){
				uni.navigateTo({
					url:'/pages/my/myAddress/myAddress'
				})
			},
			//图片上传
			 uploadImage(difference) {
				const that = this
				uni.chooseImage({
					count: 1, // 最多可以选择的图片张数，默认9
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					success: async function(res) {
						console.log('chooseImage-----》》》》》》》》', res);
						const tempFilePaths = res.tempFilePaths;
						
						if (res.tempFiles[0]['size'] > 20 * 1024 * 1024) {
							uni.showToast({
								title: '图片大小不能超过20M',
								icon: 'none',
								duration: 3000
							});
							return;
						}
						uni.showLoading({
							title: '上传中...'
						})
						if (res.tempFiles[0]['size'] < 5 * 1024 * 1024) { //图片小于5M不压缩，大于5M压缩
							that.uploadImgFile(difference,tempFilePaths, that)
						} else {
							// #ifndef H5
							uni.compressImage({
								src: res.tempFilePaths[0],
								quality: 80,
								success: result => {
									console.log(result, '=========res');
									that.uploadImgFile(difference,result.tempFilePath, that)
								}
							})
							// #endif
							// #ifdef H5
							let src = await that.$image(tempFilePaths[0])
							that.uploadImgFile(difference,[src.data], that)
							// #endif
						}
						
					}
				});
			},
			uploadImgFile(difference,filePath,that) {
				console.log(filePath,'*---------------*123123')
				uni.uploadFile({
					url: this.service+'/api/upload_image',
					filePath: filePath[0],
					name: 'image',
					header: {
						Authorization:'Bearer '+ uni.getStorageSync('token')
					},
			 	success: response => {
						let res = JSON.parse(response.data);
						console.log(res, '----res');
						if (res.code == 200) {
							this.$http({
								url:'/api/user/edit',
								method:'post',
								data:{
									avatar:res.data.url
								},
								success:result=>{
									console.log(result)
									if(result.code == 200){
										uni.showToast({
											title:result.msg
										})
										that.getUserInfo()
									}
								}
							})
							uni.hideLoading()
						}
			  },
					fail: err => {
						uni.hideLoading()
						console.log('请求失败_______________', err);
					}
				});
			},
			//退出登录
			outLogin(){
				uni.showModal({
					title:'提示',
					content:'您确定退出吗?',
					success: (res) => {
						if(res.confirm){
							uni.removeStorageSync('token')
							uni.removeStorageSync('userInfo')
							uni.showToast({
								title:'退出成功'
							})
							setTimeout(()=>{
								uni.switchTab({
									url:'/pages/my/index'
								})
							},1000)
						}
					}
				})
			}
		},
		onShow() {
			this.getUserInfo()
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.member {
		width: 100%;
		height: 100%;

		.detail {
			// height: 282px;
			margin: 18px 12px;
			background-color: #fff;
			border-radius: 8px;
			>view{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px 20px;
				.content{
					color: #868686;
					display: flex;
					align-items: center;
					>input{
						text-align: right;
						padding-right: 5px;
					}
					.uniui-right{
						font-weight: bold;
					}
				}
				.title{
					width: 300rpx;
				}
			}
			.portrait {
				.image_box {
					width: 39px;
					height: 39px;
					margin-right: 20px;
					>image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
			}
		}
		.address{
			margin: 18px 12px;
			background: #fff;
			padding: 10px 20px;
			border-radius: 8px;
			>view{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px 0;
				.content{
					color: #868686;
					.uniui-right{
						font-weight: bold;
					}
				}
			}
		}
		.out_login{
			width: 100%;
			height: 44px;
			line-height: 44px;
			position: fixed;
			bottom: 0;
			margin-bottom: var(--window-bottom);
			background-color: #fff;
			text-align: center;
			font-size: 16px;
		}
	}
</style>
